<template>
  <div class="setting">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设定</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  
    <el-tabs type="border-card">
      <el-tab-pane label="产前设定">
  
        <el-row>
          <el-col :span="4">
            <el-row>
              <span>选择图片</span>
            </el-row>
            <el-row>
              <el-button type="primary">提交</el-button>
            </el-row>
          </el-col>
          <el-col :span="20">
            <el-row>
              <el-col :span="6" :offset="6">
                <div class="block">
                  <el-pagination layout="prev, pager, next" :total="50">
                  </el-pagination>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" v-for="(img, index) in images" :key="o">
                <el-card :body-style="{ padding: '0px' }">
                  <el-row>
                    <el-col :span="24"><img src="../../assets/error001.png" class="image"></el-col>
                  </el-row>
  
                  <el-row>
                    <el-col :span="24">
                      <span>图片序号{{index+1}}</span>
                      <el-button type="danger" size="mini" round @click="dialogVisible = true">标注缺陷</el-button>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="bottom clearfix">
  
                        <el-radio v-model="img.isSelected" label="1">
                          <el-tag type="success">OK</el-tag>
                        </el-radio>
                        <el-radio v-model="img.isSelected" label="2">
                          <el-tag type="danger">NG</el-tag>
                        </el-radio>
  
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6" v-for="(img, index) in images" :key="o">
                <el-card :body-style="{ padding: '0px' }">
                  <el-row>
                    <el-col :span="24"><img src="../../assets/error001.png" class="image"></el-col>
                  </el-row>
  
                  <el-row>
                    <el-col :span="24">
                      <span>图片序号{{index+1}}</span>
                      <el-button type="danger" size="mini" round @click="dialogVisible = true">标注缺陷</el-button>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="bottom clearfix">
  
                        <el-radio v-model="img.isSelected" label="1">
                          <el-tag type="success">OK</el-tag>
                        </el-radio>
                        <el-radio v-model="img.isSelected" label="2">
                          <el-tag type="danger">NG</el-tag>
                        </el-radio>
  
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
  
  
      </el-tab-pane>
      <el-tab-pane label="配置管理">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    </el-tabs>
  
  
    <el-dialog title="标注缺陷" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-row>
                  <el-col :span="24"><img src="../../assets/error001.png" class="image"></el-col>
                </el-row>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>
  
  
  
  
  
  
  
  
  
  
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-card {
    width: 100%;
  }
  
  .el-row {
    margin: 20px;
  }
  
  
  /*   .el-table tr {
              background: #2c343c;
              color: #ffffff;
            }
            
            .el-table thead.is-group th {
              background: #2c343c;
            } */
</style>

<script>
  export default {
    components: {},
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    },
    data() {
      return {
        dialogVisible: false,
        images: [{
            name: "图片名称",
            isSelected: false,
          },
          {
            name: "图片名称",
            isSelected: false,
          },
          {
            name: "图片名称",
            isSelected: false,
          },
          {
            name: "图片名称",
            isSelected: false,
          }
        ]
      }
    }
  }
</script>


